<template>
  <div>
    <Bread1 :breadtitle="breadtitle"></Bread1>
    <a-row :gutter="20">
      <a-col :span="8">
        <!-- 搜索 -->
        <a-input-search placeholder="请输入搜索内容" v-model="queryInfo.query" enter-button allowClear @search="getOrserList" />
      </a-col>
    </a-row>

    <!-- 表格部分 -->
    <a-table
      class="table"
      :columns="columns"
      :data-source="orderList"
      rowKey="order_id"
      :pagination="false"
    >
      <span slot="order_pay" slot-scope="text, record">
        <a-tag color="#87d068" v-if="record.order_pay == '0'"> 未付款 </a-tag>
        <a-tag color="#108ee9" v-else> 已付款 </a-tag>
      </span>
      <span slot="update_time" slot-scope="text, record">{{
        record.update_time | timeout
      }}</span>
      <span slot="action" slot-scope="text, record">
        <a-button class="button" type="primary" icon="edit" @click="alter"
          >修改地址</a-button
        >
        <a-button
          class="button"
          type="primary"
          icon="bank"
          @click="showDrawer(record)"
          >物流信息</a-button
        >
      </span>
    </a-table>
    <div>
      <a-pagination
      class="pagination"
        show-quick-jumper
        :default-current="queryInfo.pagenum"
        :total="total"
        @change="onChange"
      />
    </div>

    <!-- 修改定制 -->
    <a-modal v-model="visible" title="修改地址" @ok="handleOk">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="选择省/市/县">
          <a-cascader :options="citydata" placeholder="请选择地址" />
        </a-form-item>
        <a-form-item label="详细地址">
          <a-input></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 物流 -->
    <a-drawer
      title="物流信息"
      placement="right"
      :closable="false"
      :visible="visible1"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      width="35%"
    >
      <a-alert message="已实际物流为准!" type="info" show-icon />
      <a-steps class="steps" direction="vertical" size="small" :current="5">
        <a-step
          title="商品已经下单"
          description="商家正在备货 2018-05-08 21:36:04."
        />
        <a-step
          title="您的订单将由HLA（北京海淀区清河中街店）门店安排发货"
          description="正在派发 2018-05-09 21:36:04."
        />

        <a-step
          title="发往河南"
          description="已从江苏发往河南 2018-05-10 01:36:04."
        />
        <a-step
          title="河南"
          description="前往郑州市转运中心 2018-05-10 5:36:04."
        />
        <a-step
          title="顺丰速运 已收取快件"
          description="小哥正在配送，请保持通话 2018-05-10 21:36:04."
        />
        <a-step title="快递已签收" description="郑州市金水区." />
      </a-steps>
    </a-drawer>
  </div>
</template>

<script>
import Bread1 from "@/components/bread/Bread1";
import { reqOrder } from "@/api";
import { timeout } from "@/utils/time";
import citydata from "@/utils/citydata";
export default {
  data() {
    return {
      citydata,
      breadtitle: ["订单管理", "订单列表"],
      //   查询对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      orderList: [],
      total: 0,
      columns: [
        {
          title: "序号",
          customRender: (text, record, index) => `${index + 1}`,
          align: "center",
        },
        {
          title: "订单编号",
          dataIndex: "order_number",
          key: "order_number",
          align: "center",
        },
        {
          title: "订单价格",
          dataIndex: "order_price",
          key: "order_price",
          align: "center",
        },
        {
          title: "是否付款",
          key: "order_pay",
          dataIndex: "order_pay",
          scopedSlots: { customRender: "order_pay" },
          align: "center",
        },
        {
          title: "是否发货",
          dataIndex: "is_send",
          key: "is_send",
          align: "center",
        },
        {
          title: "下单时间",
          dataIndex: "update_time",
          key: "update_time",
          scopedSlots: { customRender: "update_time" },
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      visible: false,
      visible1: false,
    };
  },
  filters: { timeout },
  components: { Bread1 },
  created() {
    this.getOrserList();
  },
  methods: {
    async getOrserList() {
      let res = await reqOrder(this.queryInfo);
      // console.log(res);
      if (res.meta.status == 200) {
        this.orderList = res.data.goods;
        this.total = res.data.total;
      }
    },
    // 修改地址
    alter() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    // 物流
    afterVisibleChange(val) {
      console.log("visible1", val);
    },
    async showDrawer(record) {
      this.visible1 = true;
    },
    onClose() {
      this.visible1 = false;
    },
    // 页码
    onChange(page, pageSize) {
      // console.log(page, pageSize);
      this.queryInfo.pagenum = page;
      this.getOrserList();
    },
    // 搜索
    // onSearch(){

    // }
  },
};
</script>

<style lang="less" scoped>
.table {
  margin-top: 10px;
}
.button {
  margin: 0 5px 0 5px;
}
.steps {
  margin-top: 10px;
}
.pagination{
  text-align: center;
  margin-top: 15px;
}
</style>